<template>
  <div id="app">
    <div class="left">
      <div class="list" v-for="item in machineList" :key="item.name" @click="addBox(item)">
        {{ item.name }}
      </div>
    </div>
    <div class="right">
      <room
        ref="room"
        :edit="edit"
        :contextMenu="contextMenu"
        @rotateObj="rotateObj"
        @getThis="getThis"
        @getAll="getAll"
      ></room>
    </div>
  </div>
</template>

<script>
import { moduleList } from '@/components/module.js';
import room from '@/components/room-components.vue';

import * as THREE from 'three';

export default {
  name: 'App',
  components: {
    room
  },
  data() {
    return {
      edit: true,
      machineList: [],
      boxConfig: {
        width: 10,
        height: 20,
        depth: 10,
        x: 0,
        y: 10.5,
        z: 0,
        rote: 0
      },
      contextMenu: [
        {
          name: '旋转',
          methods: 'rotateObj'
        },
        {
          name: '获取',
          methods: 'getThis'
        },
        {
          name: '获取全部',
          methods: 'getAll'
        }
      ]
    };
  },
  mounted() {
    this.machineList = moduleList;
  },
  methods: {
    addBox(item) {
      this.$refs.room.createBox(
        this.boxConfig.width,
        this.boxConfig.height,
        this.boxConfig.depth,
        this.boxConfig.x,
        this.boxConfig.y,
        this.boxConfig.z,
        this.boxConfig.rote,
        item
      );
    },
    rotateObj(obj) {
      obj.rotateY(Math.PI / 4);
    },
    getThis(obj) {
      console.log(obj);
    },
    getAll(obj) {
      let groupArr = obj.parent.children.filter((item) => item.isGroup);
      let tempArr = [];
      for (let i = 0; i < groupArr.length; i++) {
        let tempObj = {};
        tempObj.type = groupArr[i].type;
        tempObj.rotation = groupArr[i].rotation;
        tempObj.scale = groupArr[i].scale;
        tempObj.position = groupArr[i].position;
        for (let j = 0; j < groupArr[i].children.length; j++) {
          if (groupArr[i].children[j].type == 'LineSegments') {
            continue;
          }
          let tempChildObj = {};
          tempChildObj.name = groupArr[i].children[j].name;
          tempChildObj.path = groupArr[i].children[j].path;
          tempChildObj.rotation = groupArr[i].children[j].rotation;
          tempChildObj.scale = groupArr[i].children[j].scale;
          tempChildObj.position = groupArr[i].children[j].position;
          (tempObj.children || (tempObj.children = [])).push(tempChildObj);
        }
        tempArr.push(tempObj);
      }
      console.log(tempArr);
    }
  }
};
</script>

<style>
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  display: flex;
  overflow: hidden;
}
.left {
  height: 100%;
  width: 400px;
  display: flex;
}
.right {
  height: 100%;
  background: #ff0;
  flex: 1;
}
.list {
  flex: 1;
  text-align: center;
  margin: 3px;
  cursor: pointer;
  height: 50px;
  line-height: 50px;
  user-select: none;
}
.list:hover {
  border: solid 1px #ccc;
}
</style>
